<template>
  <div class="home">
    <h1>TodoList</h1>
    <input type="text" v-model="msg" @change="toDo" />
    <p>{{ msg }}</p>
    <div class="runing">
      <h3>进行中</h3>
      <div v-for="(item, index) of list" :key="item.id">
        <div v-if="item.checked == false">
          <input
            type="checkbox"
            @click="toChange(index)"
            :checked="item.checked"
          />
          {{ item.msg }}
          <span class="delelte" @click="toDelete(index)">删除</span>
        </div>
      </div>
    </div>
    <div class="done">
      <h3>已完成</h3>
        <div v-for="(item, index) of list" :key="item.id">
          <div v-if="item.checked == true">
          <input
            type="checkbox"
            @click="toChange(index)"
            :checked="item.checked"
          />
          {{ item.msg }}
          <span class="delelte" @click="toDelete(index)">删除</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "Home",
  data() {
    return {
      msg: "",
      list: JSON.parse(localStorage.getItem("key")) || []
    };
  },
  
  methods: {
    toDo() {
      var obj = {
        msg: this.msg,
        checked: false,
        id: Math.random(),
      };

      var list = this.list;
      var s = list.findIndex((item) => item.msg === obj.msg);
      if (s === -1) {
        list.unshift(obj);
      }
      this.msg = "";
      this.local()
    },
    toChange(index) {
      var list = this.list;
      list[index].checked = !list[index].checked;
      this.local()
    },
    toDelete(val){
      this.list.splice(val,1);
      this.local()
    },
    local(){
      localStorage.setItem("key" , JSON.stringify(this.list))
    }
  },
};
</script>
